<template>
  <div class="rtner">
    <div class="rtner-top">
      <div class="rtner-top-img">
        <img :src="topImg" alt width="100%" />
      </div>
    </div>
    <div class="rtner-down">
      <div class="rtner-down-title">100+企业的共同选择</div>
      <div class="rtner-down-box">
        <div class="rtner-down-box-left" :style="'width:'+weightVal+'%;'">
          <img src="../../images/6-left.png" alt width="100%" height="100%" />
        </div>
        <div class="rtner-down-box-right" :style="'width:'+weightVal+'%;'">
          <img src="../../images/6-right.png" alt width="100%" height="100%" />
        </div>
        <div @mousedown="myFunction" @mouseup="stopChange" style="position: relative;">
          <div style="position: absolute; width: 100%; height: 100%; z-index:99999;"></div>
          <el-carousel
            ref="carousel"
            arrow="none"
            :loop="true"
            :interval="2000"
            indicator-position="none"
            :autoplay="true"
            height="600px"
            style="width: 1440px;margin: auto;"
          >
            <el-carousel-item v-for="item in pagesNum" :key="item">
              <div class="sw-item" v-for="(item2,index) in pageVal['item' + item]" :key="index">
                <div style="height:80%; overflow: hidden;">
                  <img :src="item2.img" alt height="100%" />
                </div>
                <!-- {{ item2 }} -->
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="rtner-down-firm">
        <div
          class="rtner-down-firm-item"
          v-for="(item,index) in companyList"
          :key="index"
          v-if="item.name"
        >{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { partners } from "@/utils/api";
export default {
  name: "homeView",
  props:{
    weightVal:{
      type:Number,
      default:40
    }
  },
  data() {
    return {
      screenX: "", //鼠标左键按下的坐标
      topImg: "", //上部分图片
      logoList: [], //轮播图片
      companyList: [], //底部图片
      pagesNum: "", //几页轮播图
      pageVal: [],
      screenWidths:null,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      partners({}, res => {
        this.topImg = res.data.topImg;
        this.logoList = res.data.logoList;
        this.companyList = res.data.companyList;
        this.pagesNum = Math.ceil(res.data.logoList.length / 24);
        for (var i = 1; i <= this.pagesNum; i++) {
          var arr = [];
          for (var index = 0; index < this.logoList.length; index++) {
            if ((i - 1) * 24 <= index && index < i * 24) {
              arr.push(res.data.logoList[index]);
            }
          }
          this.pageVal["item" + i] = arr;
        }
        // 当大于一张的时候调用，使其布满页面,待定
        // if (this.pagesNum > ) {
        // this.arithmetic();
        // }
      });
    },
    // 待定
    arithmetic() {
      if (this.pageVal["item" + this.pagesNum].length != 24) {
        var list = [];
        this.pageVal["item" + this.pagesNum].forEach(item => {
          list.push(item);
        });
        for (var index = 0; index < this.logoList.length; index++) {
          list.push(this.logoList[index]);
          if (list.length == 24) {
            break;
          }
        }
        this.pageVal["item" + this.pagesNum] = list;
      }
      if (this.pageVal["item" + this.pagesNum].length != 24) {
        this.arithmetic();
      } else {
        return;
      }
    },
    // 鼠标左键按下触发
    myFunction(e) {
      // console.log(e.screenX);
      this.screenX = e.screenX;
    },
    // 鼠标左键抬起触发
    stopChange(e) {
      var num = e.screenX - this.screenX;
      console.log(num);
      // 鼠标滑动切换上一页，下一页
      if (num > 100) {
        this.$refs["carousel"]["prev"]();
      } else if (num < -100) {
        this.$refs["carousel"]["next"]();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-carousel__item {
  width: 100%;
  // outline: 2px solid red;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}
.sw-item {
  width: 214px;
  height: 121px;
  margin-right: 30px;
  margin-bottom: 30px;
  background-color: rgb(255, 255, 255);
  transition: 0.01s;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sw-item:nth-child(6n) {
  margin-right: 0px;
}

// --------------------------
.rtner {
  max-width: 1920px;
  min-width: 1440px;
  min-height: calc(100vh - 486px);
  
  margin: auto;
  &-top {
    width: 100%;
    // margin-top: 33px;
    // height: 1129px;
    // background: url("../../images/4.png");
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    // background-position: center;
    // position: relative;
    // outline: 1px solid red;
    &-img {
      // width: 740px;
      // height: 716px;
      // border-radius: 50%;
      // outline: 2px solid red;
      // position: absolute;
      // bottom: 150px;
      // overflow: hidden;
      // left: 45%;
  
    }
  }
  &-down {
    width: 100%;
    // height: 1326px;
    background: url("../../images/6-bg.png");
    background-size: 100% 100%;
    &-title {
      width: 100%;
      font-size: 30px;
      font-weight: bold;
      color: #ffffff;
      padding: 80px 0;
      text-align: center;
    }
    &-box {
      width: 100%;
      height: 630px;
      // background-color: yellow;
      position: relative;
      &-left {
        // width: 40%;
        // width:22%;
        height: 900px;
        position: absolute;
        // outline: 1px solid red;
        z-index: 99999;
        opacity: 0.85;
        top: 0;
        left: 0;
      }
      &-right {
        // width: 40%;
        height: 900px;
        z-index: 99999;
        position: absolute;
        // outline: 1px solid red;
        opacity: 0.85;
        top: 0;
        right: 0;
      }
    }
    &-firm {
      width: 1400px;
      margin: auto;
      padding: 55px 23px 42px 128px;
      background-color: #f4f8ff;
      border-radius: 10px;
      margin-top: 80px;
      display: flex;
      flex-wrap: wrap;
      border: 3px solid #ffffff;
      &-item {
        width: 228px;
        margin-right: 82px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        // outline: 1px solid red;
      }
    }
  }
}
</style>



